import "bootstrap-icons/font/bootstrap-icons.css";

const $div_ = document.createElement("div");

function createElement(htmlString) {
  $div_.innerHTML = htmlString;
  return [...$div_.children];
}

class TreeNode {
  constructor(options) {
    this.options = options;
    this._level = options.level || 0;
    this.parent = options.parent;
    this.isChecked = options.isChecked || false;
    this.isExpanded = options.isExpanded || false;
    this.children = [];
  }

  add(child) {
    this.children.push(child);
  }

  remove(child) {
    const index = this.children.indexOf(child);
    if (index !== -1) {
      this.children.splice(index, 1);
    }
  }

  checkboxChange = (isChecked) => {
    this.isChecked = isChecked;
    this.checkbox.checked = isChecked;
    this.children.forEach((child) => {
      child.checkboxChange(isChecked);
    });
  };

  toggle = () => {
    this.expandNode(!this.isExpanded);
  };

  expandNode = (isExpanded) => {
    this.isExpanded = isExpanded;
    if (this.element) {
      const { childrenDiv, switcher } = this;
      if (childrenDiv) {
        childrenDiv.style.display = this.isExpanded ? "block" : "none";
      }
      if (switcher) {
        switcher.innerHTML = this.expandHTMLString;
      }
    }
  };

  get expandHTMLString() {
    if (this.options.isLeaf || (this.options.children?.length || 0) === 0) {
      return "";
    }
    return `<i class="bi-caret-${
      this.isExpanded ? "down" : "right"
    }-fill"></i>`;
  }

  getChild(i) {
    return this.children[i];
  }

  get level() {
    return this._level || 0;
  }

  get levelString() {
    return "";
    // return "&nbsp;".repeat(this.level * 1);
  }

  get content() {
    return this.options?.content || "";
  }

  get contentElement() {
    return this._contentElement;
  }

  render() {
    this.element = createElement(`
  <div class="tree-node" data>
    <div class="tree-node-title">
      <div class="indent">${this.levelString}</div>
      <div class="switcher">${this.expandHTMLString}</div>
      <div class="checkbox"><input type="checkbox" ></div>
      <div class="tree-node-content"></div>
    </div>
    <div class="children" style="display: ${
      this.isExpanded ? "block" : "none"
    };"></div>
  </div>
    `)[0];
    this.switcher = this.element.querySelector(".switcher");
    this.element.querySelector(".indent").style.width = `${this.level * 10}px`;
    this.element
      .querySelector(".indent")
      .addEventListener("click", this.toggle);
    this.switcher.addEventListener("click", this.toggle);
    this.checkbox = this.element.querySelector(
      ".checkbox  input[type='checkbox']"
    );
    this.childrenDiv = this.element.querySelector(".children");
    this._contentElement = this.element.querySelector(".tree-node-content");
    this._contentElement.innerHTML = this.content;

    this.checkbox.addEventListener("change", (e) => {
      console.log(e.target);
      this.checkboxChange(e.target.checked);
    });
    this.options?.children?.forEach((child) => {
      const childNode = new TreeNode({
        parent: this,
        level: this.level + 1,
        ...child,
      });
      this.add(childNode);
      this.childrenDiv.appendChild(childNode.render());
    });
    return this.element;
  }
}

export default TreeNode;
